<template>
  <a-form :form="form" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-item label="部门名称" :rules="[{ required: true, message: '请输入部门名称' }]">
      <a-input v-model="form.name" placeholder="请输入部门名称" />
    </a-form-item>
    <a-form-item >
      <a-button-group>
          <a-button v-privilege="'support:department:query'" type="primary" @click="onSearch">
            <template #icon>
              <ReloadOutlined />
            </template>
            查询
          </a-button>
          <a-button v-privilege="'support:department:query'" type="primary" @click="onreset">
            <template #icon>
              <PlusOutlined />
            </template>
            重置
          </a-button>
          <a-button v-privilege="'support:department:add'" type="primary" @click="onAdd">
            <template #icon>
               新建
            </template>
          </a-button>
          </a-button-group>
    </a-form-item>
    </a-form>
    
    <a-card>
      <a-table
        :loading="tableLoading"
        :row-key="(record) => record.departmentId"
        :columns="columns"
        :data-source="departmentList"
        :pagination="false"
        :row-selection="rowSelection"
      >
        <template #name="{ record }">
          <span>{{ record.name }}</span>
        </template>
        <template #action="{ record }">
          <a-popconfirm
            title="确定删除该部门吗？"
            @confirm="onDelete(record.departmentId)"
            okText="确定"
            cancelText="取消"
          >
            <a-button type="danger" size="small">
              <ExclamationCircleOutlined /> 删除
            </a-button>
          </a-popconfirm>
        </template>
      </a-table>
    </a-card>
</template>

<script setup>
import { onMounted, reactive, ref, watch, createVNode } from 'vue';
import { departmentApi } from '/@/api/system/department-api';
import { Modal } from 'ant-design-vue';

const DEPARTMENT_PARENT_ID = 0;
  // -----------------------  筛选 ---------------------
  const keywords = ref('');
  // ----------------------- 部门树的展示 ---------------------
  const tableLoading = ref(false);

  const topDepartmentId = ref();
  // 所有部门列表
  const departmentList = ref([]);
  // 部门树形数据
  const departmentTreeData = ref([]);
  // 存放部门id和部门，用于查找
  const idInfoMap = ref(new Map());
  // 默认展开的行
  const defaultExpandedRowList = reactive([]);

  const columns = ref([
    {
      title: '部门名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '负责人',
      dataIndex: 'managerName',
      key: 'managerName',
      width: 100,
    },
    {
      title: '排序',
      dataIndex: 'sort',
      key: 'sort',
      width: 100,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      width: 150,
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      width: 150,
    },
    {
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
      width: 200,
    },
  ]);
  //挂载后查询部门树
  onMounted(() => {
    queryDepartmentTree();
  });
   // 重置
   function resetQuery() {
    keywords.value = '';
    onSearch();
  }

   // 搜索
   function onSearch() {
    if (!keywords.value) {
      departmentTreeData.value = buildDepartmentTree(departmentList.value, DEPARTMENT_PARENT_ID);
      return;
    }
    let originData = departmentList.value.concat();
    if (!originData) {
      return;
    }
    // 筛选出名称符合的部门
    let filterDepartment = originData.filter((e) => e.name.indexOf(keywords.value) > -1);
    let filterDepartmentList = [];
    // 循环筛选出的部门 构建部门树
    filterDepartment.forEach((e) => {
      recursionFilterDepartment(filterDepartmentList, e.departmentId, false);
    });
    departmentTreeData.value = buildDepartmentTree(filterDepartmentList, DEPARTMENT_PARENT_ID);
  }

  // 根据ID递归筛选部门
  function recursionFilterDepartment(resList, id, unshift) {
  
  }
    // 添加
    function addDepartment(e) {

  }

  // 编辑
  function updateDepartment(e) {

  }

  // 删除
  function deleteDepartment(id) {
    
  }
</script>